<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Artisan CSA — Join the Harvest</title>
    <meta
      name="description"
      content="Community-Supported Agriculture with a hand‑drawn, watercolor aesthetic. Check delivery by ZIP, explore seasonal shares, and join the harvest."
    />
    <style>
      :root {
        --ink: #2c2a28;
        --paper: #faf7f2;
        --wash-1: #f3ecd9; /* warm wash */
        --wash-2: #e7e0cf;
        --wash-3: #f6f0e5;
        --accent: #7a5c3a; /* soil */
        --green: #5a7f4b; /* leaf */
        --gold: #b08a3e; /* grain */
        --rose: #b76e79; /* beet */
        --sky: #7f9cab; /* muted sky */
        --shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 6px 18px rgba(0, 0, 0, 0.06);
        --radius: 0; /* no rounded corners per hand-drawn look */
      }

      /* Reset */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        margin: 0;
        color: var(--ink);
        font: 16px/1.5 ui-serif, Georgia, Iowan, "Times New Roman", serif;
        background: var(--paper);
        /* watercolor paper simulation: soft radial washes + subtle noise overlay */
        background-image: radial-gradient(
            1000px 600px at 10% 0%,
            var(--wash-1),
            transparent 70%
          ),
          radial-gradient(
            800px 500px at 90% 10%,
            var(--wash-2),
            transparent 70%
          ),
          radial-gradient(
            1000px 800px at 50% 100%,
            var(--wash-3),
            transparent 70%
          );
      }
      svg {
        display: block;
      }
      a {
        color: inherit;
      }
      img {
        max-width: 100%;
        height: auto;
      }

      /* Global layout */
      header.site {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(250, 247, 242, 0.8);
        backdrop-filter: blur(6px);
        border-bottom: 1px solid rgba(44, 42, 40, 0.1);
      }
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: clamp(12px, 2vw, 20px);
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 700;
        letter-spacing: 0.02em;
      }
      .brand svg {
        width: 36px;
        height: 36px;
      }
      nav a {
        margin-right: 16px;
        text-decoration: none;
        padding: 0.4rem 0.6rem;
        border: 1px solid transparent;
      }
      nav a:focus-visible {
        outline: 2px solid var(--ink);
      }

      h1 {
        font-size: clamp(36px, 6vw, 64px);
        line-height: 1.05;
        margin: 0 0 0.4rem;
      }
      h2 {
        font-size: clamp(22px, 3.2vw, 34px);
        margin: 0 0 0.6rem;
      }
      h3 {
        font-size: clamp(18px, 2.6vw, 24px);
        margin: 0 0 0.4rem;
      }
      p.lead {
        font-size: clamp(18px, 2.2vw, 22px);
        max-width: 60ch;
      }

      /* Paper card framing with ink-like edges */
      .card {
        background: linear-gradient(#fff, #fbf7ef);
        border: 1px solid rgba(44, 42, 40, 0.25);
        box-shadow: var(--shadow);
        padding: clamp(14px, 2vw, 22px);
      }

      /* Hero */
      .hero {
        position: relative;
        overflow: hidden;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: clamp(16px, 3vw, 32px);
        align-items: center;
      }
      .cta-row {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        align-items: flex-end;
      }
      .btn {
        background: var(--ink);
        color: #fff;
        border: 1px solid var(--ink);
        padding: 0.8rem 1rem;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
      }
      .btn.secondary {
        background: transparent;
        color: var(--ink);
      }
      .field {
        display: grid;
        gap: 6px;
      }
      label {
        font-size: 0.92rem;
      }
      input[type="text"],
      input[type="email"],
      textarea {
        border: 1px solid rgba(44, 42, 40, 0.35);
        padding: 0.7rem 0.8rem;
        background: rgba(255, 255, 255, 0.9);
        font: inherit;
      }
      input[type="range"] {
        width: 100%;
      }
      .hero-illustration {
        position: relative;
      }

      /* Parallax layers */
      .parallax {
        will-change: transform;
      }

      /* Sections */
      section {
        padding: clamp(28px, 5vw, 60px) 0;
      }
      .section-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
      }
      .section-title .rule {
        height: 1px;
        background: rgba(44, 42, 40, 0.2);
        flex: 1;
      }

      /* Share grid */
      .grid {
        display: grid;
        gap: clamp(12px, 2vw, 20px);
      }
      .share-grid {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
      }
      @media (max-width: 980px) {
        .hero-grid {
          grid-template-columns: 1fr;
        }
        .share-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 520px) {
        .share-grid {
          grid-template-columns: 1fr;
        }
      }

      .season-card {
        position: relative;
        border: 1px solid rgba(44, 42, 40, 0.3);
        background: linear-gradient(#fff, #fcfaf5);
      }
      .season-card header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(44, 42, 40, 0.2);
        padding: 0.6rem 0.8rem;
      }
      .season-card .body {
        padding: 0.8rem;
      }
      .tooltip {
        position: absolute;
        inset: auto 8px 8px 8px;
        background: #fff;
        border: 1px dashed rgba(44, 42, 40, 0.5);
        padding: 0.6rem 0.7rem;
        font-size: 0.95rem;
        line-height: 1.35;
        box-shadow: var(--shadow);
        opacity: 0;
        transform: translateY(6px);
        transition: 0.18s ease;
        pointer-events: none;
      }
      .season-card:focus-within .tooltip,
      .season-card:hover .tooltip {
        opacity: 1;
        transform: translateY(0);
      }
      .allergens {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      .badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        border: 1px solid rgba(44, 42, 40, 0.35);
        padding: 0.2rem 0.45rem;
      }

      /* Plans */
      .plans {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: clamp(16px, 3vw, 32px);
      }
      @media (max-width: 900px) {
        .plans {
          grid-template-columns: 1fr;
        }
      }
      .toggle-row {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
      }
      .price-box {
        display: grid;
        gap: 6px;
        align-content: start;
      }
      .price {
        font-size: clamp(28px, 4.5vw, 44px);
        font-weight: 800;
      }

      /* Map */
      .map-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: clamp(16px, 3vw, 32px);
      }
      @media (max-width: 900px) {
        .map-wrap {
          grid-template-columns: 1fr;
        }
      }
      .locations {
        display: grid;
        gap: 10px;
      }
      .location {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: 1px solid rgba(44, 42, 40, 0.3);
        padding: 0.6rem 0.8rem;
        background: #fff;
      }
      .distance {
        font-variant-numeric: tabular-nums;
      }

      /* Testimonials */
      .carousel {
        position: relative;
      }
      .carousel-viewport {
        overflow: hidden;
      }
      .carousel-track {
        display: flex;
        transition: transform 0.35s ease;
      }
      .testimonial {
        min-width: 100%;
        padding: clamp(14px, 2vw, 22px);
        display: grid;
        grid-template-columns: 140px 1fr;
        gap: 16px;
        align-items: center;
      }
      @media (max-width: 640px) {
        .testimonial {
          grid-template-columns: 1fr;
        }
      }
      .carousel button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        border: 1px solid rgba(44, 42, 40, 0.5);
        background: #fff;
        padding: 0.6rem;
        cursor: pointer;
      }
      .carousel .prev {
        left: 6px;
      }
      .carousel .next {
        right: 6px;
      }

      /* FAQ + Contact */
      details {
        border: 1px solid rgba(44, 42, 40, 0.35);
        background: #fff;
        padding: 0.6rem 0.8rem;
      }
      details + details {
        margin-top: 10px;
      }
      summary {
        cursor: pointer;
        font-weight: 600;
      }
      form {
        display: grid;
        gap: 10px;
      }
      .success {
        display: none;
        padding: 0.6rem 0.8rem;
        border: 1px solid rgba(44, 42, 40, 0.4);
        background: #f0f9f0;
      }

      /* Ink-style lines via CSS */
      .ink {
        filter: url(#inkbleed);
      }

      /* Focus visibility */
      :focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
      }
    </style>
  </head>
  <body>
    <!-- SVG filters for watercolor/ink effects and noise overlay -->
    <svg width="0" height="0" aria-hidden="true" focusable="false">
      <defs>
        <filter id="inkbleed">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.9"
            numOctaves="2"
            result="noise"
          />
          <feDisplacementMap in="SourceGraphic" in2="noise" scale="0.6" />
        </filter>
        <filter id="paperNoise">
          <feTurbulence
            type="fractalNoise"
            baseFrequency="0.8"
            numOctaves="3"
            stitchTiles="stitch"
            result="n"
          />
          <feColorMatrix type="saturate" values="0" />
          <feComponentTransfer>
            <feFuncA type="linear" slope="0.05" intercept="0.02" />
          </feComponentTransfer>
        </filter>
      </defs>
    </svg>

    <header class="site">
      <div
        class="wrap"
        style="
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 16px;
        "
      >
        <div class="brand" aria-label="Artisan CSA">
          <!-- Hand-drawn sprout logo -->
          <svg aria-hidden="true" viewBox="0 0 64 64" class="ink">
            <path
              d="M32 58c0-10 1-20 6-28"
              fill="none"
              stroke="var(--ink)"
              stroke-width="2"
            />
            <path
              d="M26 30c10 2 18-6 20-14-8-2-16 2-20 14z"
              fill="var(--green)"
              opacity=".2"
            />
            <path
              d="M24 28c8 2 16-6 18-14"
              fill="none"
              stroke="var(--ink)"
              stroke-width="2"
            />
            <path
              d="M38 28c10-2 14-10 12-18-8 2-12 10-12 18z"
              fill="var(--gold)"
              opacity=".2"
            />
            <path
              d="M38 28c8-2 12-10 12-18"
              fill="none"
              stroke="var(--ink)"
              stroke-width="2"
            />
          </svg>
          <span>Artisan CSA</span>
        </div>
        <nav aria-label="Primary">
          <a href="#share">Seasonal Boxes</a>
          <a href="#plans">Plans</a>
          <a href="#map">Delivery</a>
          <a href="#testimonials">Voices</a>
          <a href="#faq">FAQ</a>
        </nav>
      </div>
    </header>

    <main>
      <!-- HERO -->
      <section class="hero" aria-labelledby="hero-heading">
        <div class="wrap hero-grid">
          <div>
            <h1 id="hero-heading">Eat with the seasons.</h1>
            <p class="lead">
              A small farm CSA delivering hand‑picked produce and pantry
              add‑ons. No warehouses. Just soil, sun, and neighbors.
            </p>
            <div class="cta-row" style="margin-top: 12px">
              <div class="field" style="min-width: 220px">
                <label for="zip">Check your ZIP for delivery</label>
                <div style="display: flex; gap: 6px">
                  <input
                    id="zip"
                    name="zip"
                    type="text"
                    inputmode="numeric"
                    pattern="\\d{5}"
                    placeholder="e.g. 94110"
                    aria-describedby="zip-result"
                    aria-label="ZIP code"
                  />
                  <button class="btn secondary" id="zip-check">Check</button>
                </div>
                <div id="zip-result" role="status" aria-live="polite"></div>
              </div>
              <a class="btn" href="#plans">Join the harvest</a>
            </div>
          </div>

          <!-- Seasonal basket illustration with gentle parallax -->
          <div class="hero-illustration">
            <div class="parallax" data-parallax="0.15">
              <svg
                viewBox="0 0 520 360"
                role="img"
                aria-label="Hand-drawn basket of seasonal produce"
                class="ink"
                style="width: 100%; height: auto"
              >
                <!-- Basket -->
                <ellipse
                  cx="260"
                  cy="270"
                  rx="190"
                  ry="40"
                  fill="#b08a3e"
                  opacity=".15"
                />
                <path
                  d="M60 230h400v60c-120 40-280 40-400 0z"
                  fill="#e2c58e"
                  opacity=".3"
                />
                <path
                  d="M60 230h400v0c-120 40-280 40-400 0z"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
                <path
                  d="M110 210c80 40 220 40 300 0"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
                <!-- Produce washes -->
                <circle
                  cx="180"
                  cy="180"
                  r="50"
                  fill="var(--green)"
                  opacity=".25"
                />
                <circle
                  cx="240"
                  cy="160"
                  r="46"
                  fill="var(--rose)"
                  opacity=".25"
                />
                <circle
                  cx="310"
                  cy="170"
                  r="42"
                  fill="var(--sky)"
                  opacity=".25"
                />
                <path
                  d="M140 150c20-20 40-20 60 0"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
                <path
                  d="M230 140c10-12 26-12 36 0"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
                <path
                  d="M290 150c20-10 40-10 56 0"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
                <!-- Handles -->
                <path
                  d="M140 210c-10-80 250-80 240 0"
                  fill="none"
                  stroke="var(--ink)"
                  stroke-width="3"
                />
              </svg>
            </div>
          </div>
        </div>
      </section>

      <!-- SHARE: Seasonal boxes -->
      <section id="share" aria-labelledby="share-heading">
        <div class="wrap">
          <div class="section-title">
            <h2 id="share-heading">Seasonal Boxes</h2>
            <div class="rule" aria-hidden="true"></div>
          </div>
          <div class="grid share-grid" role="list">
            <!-- Reusable allergen icons -->
            <template id="icon-peanut">
              <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                aria-hidden="true"
              >
                <path
                  d="M7 12c0-5 4-8 7-8s4 3 4 6-2 7-6 7-5-2-5-5z"
                  fill="none"
                  stroke="var(--ink)"
                />
              </svg>
            </template>
            <template id="icon-dairy">
              <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                aria-hidden="true"
              >
                <path
                  d="M9 3h6l2 4v12a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V7z"
                  fill="none"
                  stroke="var(--ink)"
                />
              </svg>
            </template>
            <template id="icon-gluten">
              <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                aria-hidden="true"
              >
                <path
                  d="M6 20C6 14 12 4 12 4s6 10 6 16"
                  fill="none"
                  stroke="var(--ink)"
                />
              </svg>
            </template>
            <template id="icon-vegan">
              <svg
                viewBox="0 0 24 24"
                width="18"
                height="18"
                aria-hidden="true"
              >
                <path
                  d="M4 12c8 0 8-8 8-8s0 8 8 8c-4 8-12 8-16 0z"
                  fill="none"
                  stroke="var(--ink)"
                />
              </svg>
            </template>

            <article
              class="season-card card"
              tabindex="0"
              aria-labelledby="spring-h"
            >
              <header>
                <h3 id="spring-h">Spring</h3>
                <div class="allergens" aria-label="Allergens">
                  <span class="badge" title="Vegan"
                    ><span class="icon" data-icon="vegan"></span>Vegan</span
                  >
                </div>
              </header>
              <div class="body">
                <p>Fresh starts. Tender greens and sweet roots.</p>
                <div class="tooltip" role="tooltip">
                  Typical produce: pea shoots, radishes, asparagus, spring
                  onions, spinach, artichokes, strawberries.
                </div>
              </div>
            </article>

            <article
              class="season-card card"
              tabindex="0"
              aria-labelledby="summer-h"
            >
              <header>
                <h3 id="summer-h">Summer</h3>
                <div class="allergens">
                  <span class="badge" title="Gluten"
                    ><span class="icon" data-icon="gluten"></span>Gluten</span
                  >
                </div>
              </header>
              <div class="body">
                <p>Peak sunshine. Crisp cucumbers and juicy stone fruit.</p>
                <div class="tooltip">
                  Typical produce: tomatoes, cucumbers, peppers, basil, corn,
                  peaches, plums, melons.
                </div>
              </div>
            </article>

            <article
              class="season-card card"
              tabindex="0"
              aria-labelledby="fall-h"
            >
              <header>
                <h3 id="fall-h">Fall</h3>
                <div class="allergens">
                  <span class="badge" title="Dairy"
                    ><span class="icon" data-icon="dairy"></span>Dairy</span
                  >
                </div>
              </header>
              <div class="body">
                <p>Harvest glow. Squash, brassicas, and apples.</p>
                <div class="tooltip">
                  Typical produce: delicata, kabocha, kale, broccoli, carrots,
                  apples, pears, herbs.
                </div>
              </div>
            </article>

            <article
              class="season-card card"
              tabindex="0"
              aria-labelledby="winter-h"
            >
              <header>
                <h3 id="winter-h">Winter</h3>
                <div class="allergens">
                  <span class="badge" title="Peanuts"
                    ><span class="icon" data-icon="peanut"></span>Peanut</span
                  >
                </div>
              </header>
              <div class="body">
                <p>Cold‑sweet roots and sturdy greens.</p>
                <div class="tooltip">
                  Typical produce: leeks, chard, cabbage, beets, potatoes,
                  citrus, mushrooms.
                </div>
              </div>
            </article>
          </div>
        </div>
      </section>

      <!-- PLANS -->
      <section id="plans" aria-labelledby="plans-heading">
        <div class="wrap">
          <div class="section-title">
            <h2 id="plans-heading">Plans & Add‑ons</h2>
            <div class="rule"></div>
          </div>
          <div class="plans">
            <div class="card">
              <h3>Delivery frequency</h3>
              <p class="lead">
                Slide to choose weekly or bi‑weekly deliveries. Prices update
                live. Add eggs, flowers, or bread per delivery.
              </p>
              <label for="freq">Frequency</label>
              <input
                id="freq"
                type="range"
                min="0"
                max="1"
                step="1"
                value="0"
                aria-valuemin="0"
                aria-valuemax="1"
                aria-valuenow="0"
                aria-label="Delivery frequency slider"
              />
              <div class="toggle-row" aria-live="polite" id="freq-labels"></div>
              <div class="toggle-row" style="margin-top: 10px">
                <label
                  ><input
                    type="checkbox"
                    class="addon"
                    data-name="Eggs"
                    data-price="6"
                  />
                  Eggs (+$6)</label
                >
                <label
                  ><input
                    type="checkbox"
                    class="addon"
                    data-name="Flowers"
                    data-price="10"
                  />
                  Flowers (+$10)</label
                >
                <label
                  ><input
                    type="checkbox"
                    class="addon"
                    data-name="Bread"
                    data-price="5"
                  />
                  Bread (+$5)</label
                >
              </div>
            </div>

            <div class="card price-box" aria-live="polite">
              <h3>Estimated cost</h3>
              <div>
                Base per delivery: <strong id="base-per">$32.00</strong>
              </div>
              <div>
                Add‑ons per delivery: <strong id="addons-per">$0.00</strong>
              </div>
              <div>Deliveries per month: <strong id="per-month">4</strong></div>
              <div class="price" id="monthly">$128.00 / month</div>
              <div id="per-delivery">$32.00 per delivery</div>
              <button class="btn" id="join-btn" aria-describedby="join-note">
                Join the harvest
              </button>
              <div id="join-note" style="font-size: 0.9rem">
                Press to jump to contact form.
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- MAP & PICKUPS -->
      <section id="map" aria-labelledby="map-heading">
        <div class="wrap">
          <div class="section-title">
            <h2 id="map-heading">Delivery & Pickup</h2>
            <div class="rule"></div>
          </div>
          <div class="map-wrap">
            <div class="card" aria-label="Map showing delivery radius">
              <!-- Static map illustration with delivery radius overlay -->
              <svg
                viewBox="0 0 600 420"
                role="img"
                aria-label="Static map with delivery radius"
                class="ink"
                style="width: 100%; height: auto"
              >
                <defs>
                  <pattern
                    id="grid"
                    width="30"
                    height="30"
                    patternUnits="userSpaceOnUse"
                  >
                    <path
                      d="M0 30 V0 H30"
                      fill="none"
                      stroke="rgba(44,42,40,.15)"
                    />
                  </pattern>
                </defs>
                <rect x="0" y="0" width="600" height="420" fill="url(#grid)" />
                <circle
                  id="delivery-circle"
                  cx="300"
                  cy="210"
                  r="140"
                  fill="#5a7f4b"
                  opacity=".08"
                  stroke="var(--green)"
                />
                <!-- Center farm marker -->
                <g>
                  <circle cx="300" cy="210" r="6" fill="var(--rose)" />
                  <path
                    d="M290 195 h20 v10 h-20z"
                    fill="var(--rose)"
                    opacity=".25"
                  />
                  <text x="306" y="206" font-size="12" fill="var(--ink)">
                    Farm
                  </text>
                </g>
                <!-- Pickup markers will be injected by JS -->
                <g id="pickup-markers"></g>
              </svg>
            </div>

            <div class="card locations" aria-label="Pickup locations list">
              <div class="location">
                <div>
                  <strong>Mission Co‑op</strong><br /><small
                    >123 Valencia St, SF</small
                  >
                </div>
                <span class="badge distance" data-id="mission">—</span>
              </div>
              <div class="location">
                <div>
                  <strong>Sunset Market</strong><br /><small
                    >9th & Irving, SF</small
                  >
                </div>
                <span class="badge distance" data-id="sunset">—</span>
              </div>
              <div class="location">
                <div>
                  <strong>Oakland Spot</strong><br /><small
                    >Telegraph & 51st, Oakland</small
                  >
                </div>
                <span class="badge distance" data-id="oak">—</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- TESTIMONIALS -->
      <section id="testimonials" aria-labelledby="t-heading">
        <div class="wrap">
          <div class="section-title">
            <h2 id="t-heading">From the field</h2>
            <div class="rule"></div>
          </div>
          <div
            class="card carousel"
            role="region"
            aria-roledescription="carousel"
            aria-label="Farmer testimonials"
          >
            <button class="prev" aria-label="Previous testimonial">◀</button>
            <div class="carousel-viewport">
              <div class="carousel-track" id="track">
                <!-- Slide 1 -->
                <article class="testimonial" aria-roledescription="slide">
                  <svg
                    viewBox="0 0 140 140"
                    width="140"
                    height="140"
                    class="ink"
                    aria-hidden="true"
                  >
                    <circle
                      cx="70"
                      cy="70"
                      r="60"
                      fill="#d8e3d4"
                      opacity=".4"
                    />
                    <path
                      d="M40 80c10 20 50 20 60 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <path
                      d="M55 60c10-12 20-12 30 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <circle cx="55" cy="56" r="2" fill="var(--ink)" />
                    <circle cx="85" cy="56" r="2" fill="var(--ink)" />
                  </svg>
                  <div>
                    <p>
                      “We harvest at dawn and pack by hand. Your box changes
                      with the weather, just like the farm.”
                    </p>
                    <p><strong>Rosa, head grower</strong></p>
                  </div>
                </article>
                <!-- Slide 2 -->
                <article class="testimonial" aria-roledescription="slide">
                  <svg
                    viewBox="0 0 140 140"
                    width="140"
                    height="140"
                    class="ink"
                    aria-hidden="true"
                  >
                    <circle
                      cx="70"
                      cy="70"
                      r="60"
                      fill="#f1d8d8"
                      opacity=".4"
                    />
                    <path
                      d="M42 82c10 18 46 18 56 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <path
                      d="M55 58c8-10 18-10 28 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <circle cx="58" cy="54" r="2" fill="var(--ink)" />
                    <circle cx="86" cy="54" r="2" fill="var(--ink)" />
                  </svg>
                  <div>
                    <p>
                      “CSA lets us plan seeds by members, not guesses. Less
                      waste. Better flavor.”
                    </p>
                    <p><strong>Jules, field manager</strong></p>
                  </div>
                </article>
                <!-- Slide 3 -->
                <article class="testimonial" aria-roledescription="slide">
                  <svg
                    viewBox="0 0 140 140"
                    width="140"
                    height="140"
                    class="ink"
                    aria-hidden="true"
                  >
                    <circle
                      cx="70"
                      cy="70"
                      r="60"
                      fill="#d8dceb"
                      opacity=".4"
                    />
                    <path
                      d="M44 82c10 20 48 20 58 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <path
                      d="M56 60c10-12 18-12 26 0"
                      fill="none"
                      stroke="var(--ink)"
                      stroke-width="2"
                    />
                    <circle cx="58" cy="56" r="2" fill="var(--ink)" />
                    <circle cx="84" cy="56" r="2" fill="var(--ink)" />
                  </svg>
                  <div>
                    <p>
                      “Add‑ons keep hens and flowers in the rotation year‑round.
                      Thank you for choosing local.”
                    </p>
                    <p><strong>Sam, farmer‑florist</strong></p>
                  </div>
                </article>
              </div>
            </div>
            <button class="next" aria-label="Next testimonial">▶</button>
          </div>
        </div>
      </section>

      <!-- FAQ + CONTACT -->
      <section id="faq" aria-labelledby="faq-heading">
        <div class="wrap">
          <div class="section-title">
            <h2 id="faq-heading">FAQ & Contact</h2>
            <div class="rule"></div>
          </div>
          <div
            class="grid"
            style="grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 32px)"
          >
            <div>
              <details>
                <summary>What if I’m out of town?</summary>
                <p>
                  Skip or donate a week from your account page. Bi‑weekly
                  members can shift a delivery within the season.
                </p>
              </details>
              <details>
                <summary>Can I customize my box?</summary>
                <p>
                  We offer 2 swaps each delivery. Availability varies with the
                  field list.
                </p>
              </details>
              <details>
                <summary>Is everything organic?</summary>
                <p>
                  We follow organic practices and never use synthetic herbicides
                  or pesticides.
                </p>
              </details>
            </div>
            <div>
              <form id="contact" aria-label="Contact form">
                <div class="field">
                  <label for="email">Email</label
                  ><input
                    id="email"
                    name="email"
                    type="email"
                    required
                    placeholder="you@example.com"
                  />
                </div>
                <div class="field">
                  <label for="msg">Message</label
                  ><textarea
                    id="msg"
                    name="msg"
                    rows="4"
                    placeholder="Tell us where you are and any preferences."
                  ></textarea>
                </div>
                <button class="btn" type="submit">Send</button>
                <div
                  class="success"
                  id="contact-success"
                  role="status"
                  aria-live="polite"
                >
                  Thanks. We’ll reply soon.
                </div>
              </form>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer
      style="
        border-top: 1px solid rgba(44, 42, 40, 0.2);
        padding: 20px 0;
        background: rgba(255, 255, 255, 0.6);
      "
    >
      <div
        class="wrap"
        style="
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          align-items: center;
          justify-content: space-between;
        "
      >
        <small
          >© <span id="year"></span> Artisan CSA. Hand‑drawn in ink on digital
          paper.</small
        >
        <div role="navigation" aria-label="Footer">
          <a href="#share">Boxes</a>
          <a href="#plans">Plans</a>
          <a href="#map">Delivery</a>
          <a href="#faq">FAQ</a>
        </div>
      </div>
    </footer>

    <script>
      (function () {
        // Year
        document.getElementById("year").textContent = new Date().getFullYear();

        // Parallax
        const parallaxEls = [...document.querySelectorAll("[data-parallax]")];
        const onScroll = () => {
          const y = window.scrollY || 0;
          parallaxEls.forEach((el) => {
            const speed = parseFloat(el.dataset.parallax || "0.1");
            el.style.transform = `translateY(${y * speed * -0.2}px)`;
          });
        };
        window.addEventListener("scroll", onScroll, { passive: true });
        onScroll();

        // Inject allergen icons into badges
        document.querySelectorAll(".badge .icon").forEach((span) => {
          const id = span.getAttribute("data-icon");
          const tpl = document.getElementById("icon-" + id);
          if (tpl) span.appendChild(tpl.content.cloneNode(true));
        });

        // Frequency + pricing
        const freq = document.getElementById("freq");
        const freqLabels = document.getElementById("freq-labels");
        const basePerEl = document.getElementById("base-per");
        const addonsPerEl = document.getElementById("addons-per");
        const perMonthEl = document.getElementById("per-month");
        const monthlyEl = document.getElementById("monthly");
        const perDeliveryEl = document.getElementById("per-delivery");
        const addonBoxes = [...document.querySelectorAll(".addon")];
        const BASE = 32; // per delivery

        function renderFreq() {
          const weekly = freq.value === "0";
          freqLabels.innerHTML = "";
          const make = (txt, active) => {
            const b = document.createElement("span");
            b.className = "badge";
            b.textContent = txt;
            if (active) b.style.borderColor = "var(--ink)";
            return b;
          };
          freqLabels.append(make("Weekly", weekly));
          freqLabels.append(make("Bi‑weekly", !weekly));
          return weekly;
        }

        function calc() {
          const weekly = renderFreq();
          const deliveriesPerMonth = weekly ? 4 : 2;
          const addonPer = addonBoxes
            .filter((x) => x.checked)
            .map((x) => +x.dataset.price)
            .reduce((a, b) => a + b, 0);
          const perDelivery = BASE + addonPer;
          const monthly = perDelivery * deliveriesPerMonth;

          basePerEl.textContent = `$${BASE.toFixed(2)}`;
          addonsPerEl.textContent = `$${addonPer.toFixed(2)}`;
          perMonthEl.textContent = deliveriesPerMonth;
          monthlyEl.textContent = `$${monthly.toFixed(2)} / month`;
          perDeliveryEl.textContent = `$${perDelivery.toFixed(2)} per delivery`;
        }

        freq.addEventListener("input", calc);
        addonBoxes.forEach((cb) => cb.addEventListener("change", calc));
        calc();

        // Join CTA scroll to contact
        document.getElementById("join-btn").addEventListener("click", () => {
          document.getElementById("email").focus({ preventScroll: false });
          document
            .getElementById("email")
            .scrollIntoView({ behavior: "smooth", block: "center" });
        });

        // ZIP checker (simple demo: 941**, 940**, 946**, 947** supported)
        const zipBtn = document.getElementById("zip-check");
        const zipInput = document.getElementById("zip");
        const zipResult = document.getElementById("zip-result");
        const OK = ["941", "940", "946", "947"];
        function checkZip() {
          const m = (zipInput.value || "").trim().match(/^\d{5}$/);
          if (!m) {
            zipResult.textContent = "Enter a 5‑digit ZIP.";
            return;
          }
          const ok = OK.includes(zipInput.value.slice(0, 3));
          zipResult.textContent = ok
            ? "We deliver to your area."
            : "Outside our current delivery zone. Try pickup.";
        }
        zipBtn.addEventListener("click", checkZip);
        zipInput.addEventListener("keydown", (e) => {
          if (e.key === "Enter") {
            e.preventDefault();
            checkZip();
          }
        });

        // Static map markers + distances
        const center = { lat: 37.7595, lon: -122.4148 }; // farm center (SF Mission approx.)
        const pickups = [
          { id: "mission", name: "Mission Co‑op", lat: 37.759, lon: -122.421 },
          { id: "sunset", name: "Sunset Market", lat: 37.765, lon: -122.466 },
          { id: "oak", name: "Oakland Spot", lat: 37.836, lon: -122.262 },
        ];
        function haversine(a, b) {
          const toRad = (d) => (d * Math.PI) / 180;
          const R = 6371; // km
          const dLat = toRad(b.lat - a.lat);
          const dLon = toRad(b.lon - a.lon);
          const lat1 = toRad(a.lat),
            lat2 = toRad(b.lat);
          const h =
            Math.sin(dLat / 2) ** 2 +
            Math.cos(lat1) * Math.cos(lat2) * Math.sin(dLon / 2) ** 2;
          return 2 * R * Math.asin(Math.sqrt(h));
        }
        pickups.forEach((p) => {
          const km = haversine(center, p);
          const mi = km * 0.621371;
          const badge = document.querySelector(`.distance[data-id="${p.id}"]`);
          if (badge) badge.textContent = mi.toFixed(1) + " mi";

          // Inject a marker near the circle center; rough projection for demo
          const gx = 300 + (p.lon - center.lon) * 900; // crude scale for illustration
          const gy = 210 - (p.lat - center.lat) * 1100;
          const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
          g.setAttribute("transform", `translate(${gx},${gy})`);
          g.innerHTML = `<circle r="5" fill="var(--sky)"></circle><text x="8" y="4" font-size="12">${p.name}</text>`;
          document.getElementById("pickup-markers").appendChild(g);
        });

        // Testimonials carousel
        const track = document.getElementById("track");
        const slides = [...track.children];
        let index = 0;
        function updateCarousel() {
          track.style.transform = `translateX(${-index * 100}%)`;
        }
        document
          .querySelector(".carousel .prev")
          .addEventListener("click", () => {
            index = (index + slides.length - 1) % slides.length;
            updateCarousel();
          });
        document
          .querySelector(".carousel .next")
          .addEventListener("click", () => {
            index = (index + 1) % slides.length;
            updateCarousel();
          });
        // Keyboard support
        document.querySelector(".carousel").addEventListener("keydown", (e) => {
          if (e.key === "ArrowLeft") {
            index = (index + slides.length - 1) % slides.length;
            updateCarousel();
          }
          if (e.key === "ArrowRight") {
            index = (index + 1) % slides.length;
            updateCarousel();
          }
        });

        // Contact form demo
        document.getElementById("contact").addEventListener("submit", (e) => {
          e.preventDefault();
          document.getElementById("contact-success").style.display = "block";
        });
      })();
    </script>
  </body>
</html>
